<template>
    <div class="nearby-hospitals">
        <div class="section-header">
            <span class="title">附近医院</span>
            <van-button size="small" plain hairline type="primary" class="more-btn" @click="onMoreClick">
                查看全部 <van-icon name="arrow" />
            </van-button>
        </div>

        <div class="hospital-list">
            <div v-for="(hospital, index) in hospitals" :key="index" class="hospital-item">
                <img :src="hospital.image" class="hospital-image" />
                <div class="hospital-info">
                    <div class="hospital-name">{{ hospital.name }}</div>
                    <div class="hospital-tags">
                        <span class="tag">{{ hospital.level }}</span>
                        <span class="tag">{{ hospital.type }}</span>
                    </div>
                    <div class="hospital-address">
                        <van-icon name="location-o" />
                        <span>距离: {{ hospital.distance }}km</span>
                    </div>
                </div>
                <van-button type="primary" size="small" class="book-btn" @click="onBookClick(hospital.id)">
                    预约
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface Hospital {
    id: number
    name: string
    image: string
    level: string
    type: string
    distance: number
}

const hospitals = ref<Hospital[]>([
    {
        id: 1,
        name: '协和医院',
        image: '/images/hospital1.jpg',
        level: '三甲',
        type: '综合医院',
        distance: 1.2
    },
    {
        id: 2,
        name: '人民医院',
        image: '/images/hospital2.jpg',
        level: '三甲',
        type: '综合医院',
        distance: 2.5
    }
])

const onBookClick = (hospitalId: number) => {
    router.push(`/hospital/${hospitalId}/booking`)
}

const onMoreClick = () => {
    router.push('/hospitals')
}
</script>

<style scoped lang="scss">
.nearby-hospitals {
    margin: 0px 6px 6px 6px;
    padding: 16px 12px;
    background: #fff;

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .more-btn {
            font-size: 12px;
            height: 24px;
            padding: 0 8px;

            .van-icon {
                font-size: 12px;
            }
        }
    }

    .hospital-list {
        .hospital-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
           

            &:last-child {
                border-bottom: none;
            }

            .hospital-image {
                width: 80px;
                height: 60px;
                border-radius: 4px;
                object-fit: cover;
                margin-right: 12px;
            }

            .hospital-info {
                flex: 1;

                .hospital-name {
                    font-size: 16px;
                    color: #333;
                    margin-bottom: 8px;
                }

                .hospital-tags {
                    margin-bottom: 8px;

                    .tag {
                        display: inline-block;
                        padding: 2px 6px;
                        background: #f5f5f5;
                        border-radius: 4px;
                        font-size: 12px;
                        color: #666;
                        margin-right: 8px;
                    }
                }

                .hospital-address {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: #999;

                    .van-icon {
                        font-size: 14px;
                        margin-right: 4px;
                    }
                }
            }

            .book-btn {
                flex-shrink: 0;
            }
        }
    }
}
</style>